<template>
  <view class="content">
    <u-loading-page :loading="loading" bgColor="(255, 255, 255)"></u-loading-page>
    <view v-if="!loading">
      <!-- 标签栏 -->
			<!-- <div>123</div> -->
      <view class="tabs">
        <u-tabs :list="navList" :activeStyle="{color:'#333',fontWeight:'bold'}" @click="tabs"></u-tabs>
      </view>

      <!-- 加载状态 -->
      <view class="loaded">
        <template>
        </template>
      </view>

      <!-- 主体 -->
      <view class="main" v-if="listInfo.length > 0">
        <blog-items :listInfo="listInfo"></blog-items>
      </view>

      <!-- 编辑按钮 -->
      <view class="update" @click="onEdit">
        <i style="font-size: 2rem;color: white;" class="iconfont icon-xiugai"></i>
      </view>
    </view>
  </view>
</template>

<script>
import { store } from "../../uni_modules/uni-id-pages/common/store";

import blogItems from "../../components/blog-items/blog-items.vue";
const db = uniCloud.database();
const dbCmd = db.command;
export default {
  components: {
    blogItems
  },
  data() {
    return {
      navList: [
        {
          name: "最新",
          type: "publish_date"
        },
        {
          name: "热门",
          type: "view_count"
        }
      ],
      listInfo: [],
      navIndex: 0,
      loading: false
    };
  },
  onShow() {
    this.dataList();
  },
  methods: {
    // 获取文章总数据
    async dataList() {
      this.loading = true;
      // 获取文章表中的所有数据(未删除数据)
      let editTemp = await db
        .collection("quanzi_article")
        .where("delStatus != true")
        .getTemp();

      // 获取用户表中的_id,username,nickname,avatar_file字段
      let userTemp = await db
        .collection("uni-id-users")
        .field("_id,username,nickname,avatar_file")
        .getTemp();

      // 对文章进行时间和热门排序
      let { result } = await db
        .collection(editTemp, userTemp)
        .orderBy(this.navList[this.navIndex].type, "desc")
        .get();

      let dataId = [];
      let dataArr = result.data;
      
      // 用户登录后才显示点赞信息
      if (store.hasLogin) {
        dataArr.forEach(value => {
          dataId.push(value._id);
        });

        // 对当前用户点赞后的文章id进行查询
        let { result: likes } = await db
          .collection("quanzi_like")
          .where({
            article_id: dbCmd.in(dataId),
            user_id: uniCloud.getCurrentUserInfo().uid
          })
          .get();

        likes.data.forEach(value => {
          let findIndex = dataArr.findIndex(item => {
            return value.article_id == item._id;
          });
          dataArr[findIndex].likeStatus = true;
        });
      }

      this.listInfo = dataArr;

      setTimeout(() => {
        this.loading = false;
      });
    },
    // 点击切换热门
    tabs(item) {
      this.navIndex = item.index;
      this.dataList();
    },
    // 点击进入详情页
    onEdit() {
      uni.navigateTo({
        url: "/pages/edit/edit"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  .update {
    width: 3.5rem;
    height: 3.5rem;
    border: 1px solid #33a5e0;
    border-radius: 50%;
    position: fixed;
    right: 100rpx;
    bottom: 200rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #3c9cff;
    box-shadow: 0 0 16rpx #33a5e0;
  }
  .main {
    margin: 10rpx 0;
    padding: 20rpx 40rpx;
  }
}
</style>
